<template>
	<view style="position: relative;">
		<view class="filter-nav" id="" @click.stop="">
			<view class="filter-item flex-1" @click="selectTab(1)">
				<text :class="((value1&&value1!=0)||selectTabIndex==1)?'text-orange':''">{{value1Name}}</text>
				<text class="cuIcon-triangleupfill text-orange" v-if="selectTabIndex==1"></text>
				<text :class="value1&&value1!=0?'text-orange':''" class="cuIcon-triangledownfill" v-else></text>
			</view>
			<view class="filter-item  flex-1" @click="selectTab(2)">
				<text :class="((value2&&value2!=0)||selectTabIndex==2)?'text-orange':''">{{value2Name}}</text>
				<text class="cuIcon-triangleupfill text-orange" v-if="selectTabIndex==2"></text>
				<text :class="value2&&value2!=0?'text-orange':''" class="cuIcon-triangledownfill" v-else></text>
			</view>
			<view class="filter-item  flex-1" @click="change3">
				<text :class="value3?'text-orange':''">{{value3Name}}</text>
				<!-- <text class="cuIcon-triangledownfill"></text> -->
			</view>


		</view>
		<view v-if="selectTabIndex!=-1">
			<view class="bg-white width-100"
				style="max-height: 400px;overflow-y: auto;position: absolute;top: 49px;left: 0;z-index: 9;">
				<view v-for="(item,index) in options">
					<view class="flex justify-between align-center padding-lr-sm font-14" style="border-top: 1px solid #ededed;"  @click.stop="selectItem(item)">
						<view class="flex align-center"
							:class="currentItem.value==item.value?'text-orange':''"
							style="height: 50px;">{{item.label}}
						</view>
						<view >
							<text v-if="currentItem.value==item.value" class="cuIcon-check text-orange"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="mask width-100"
				style="position: absolute;top: 49px;left: 0;z-index: 8;background-color: rgba(0, 0, 0, 0.6);"
				:style="{ height: `calc(100vh - ${height}px)` }"></view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "home-filter-bar",
		props: {
			height: {
				type: Number,
				default: 0,
			},
			value1Init: {
				type: Number,
				default: 0,

			},
			value2Init: {
				type: Number,
				default: 0,

			},
			value3Init: {
				type: Boolean,
				default: false,

			},
			selectTabIndexInit: {
				type: Number,
				default: -1,

			},
			canClick: {
				type: Boolean,
				default: true,
			},
		},
		computed: {
			value1Name: function() {
				let name = '综合';
				this.options1.forEach(item => {
					if (item.value == this.value1) {
						name = item.label;
					}

				});
				return name;

			},
			value2Name: function() {
				let name = '分类';
				this.options2.forEach(item => {
					if (item.value == this.value2) {
						name = item.label;
					}

				});
				return name;

			},
			value3Name: function() {
				let name = '全部';
				if (this.value3) {
					name = '已选';
				}

				return name;

			},


		},
		data() {
			return {
				currentItem:{
					value:0,
					label:''
					
				},
				value1: 0,
				value2: 0,
				value3: false,
				selectTabIndex: -1,
				options: [],
				options1: [{
						label: '综合',
						value: 0,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '分类',
						value: 0,
					},{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
			};
		},
		mounted() {
			console.log(this.height)
			this.selectTabIndex = this.selectTabIndexInit;
			this.value1 = this.value1Init;
			this.value2 = this.value2Init;
			this.value3 = this.value3Init;
		},
		methods: {
			gonext(){
				console.log("我被点击了")
				if(!this.canClick){
					console.log("我要点的是父级")
					this.$emit('scrollIntoViewById')
				}
			},
			handleValue(data){
				let index = data.index
				if(index==1){
					this.value1 = data.value
				}
				if(index==2){
					this.value2 = data.value
					
				}
				if(index==3){
					this.value3 = data.value
					
				}
			},
			selectItem(item) {
				console.log(this.selectTabIndex)
				console.log(item)
				if(!this.canClick){
					console.log("我要点的是父级")
					
					return
				}
				this.currentItem = item;
				if (this.selectTabIndex == 1) {
					this.value1 = item.value;
					this.$emit('selectChange', {
						index: 1,
						value: this.value1,
					});
				} else if (this.selectTabIndex == 2) {
					this.value2 = item.value;
					this.$emit('selectChange', {
						index: 2,
						value: this.value2,
					});
				}
				//选中后关闭
				this.selectTabIndex = -1;
				this.options = [];
			},
			change3() {
				if(!this.canClick){
					console.log("我要点的是父级")
					this.$emit('scrollIntoViewById',3)
					return
				}
				this.value3 = !this.value3
				this.$emit('selectChange', {
					index: 3,
					value: this.value3,
				});
				this.selectTabIndex = -1;
				this.options = [];
				this.currentItem = {}
			},
			selectTab(index) {
				if(!this.canClick){
					console.log("我要点的是父级")
					this.$emit('scrollIntoViewById',index)
					return
				}
				if (this.selectTabIndex == index) {
					this.selectTabIndex = -1;
					this.options = [];
					return;
				}
				this.selectTabIndex = index;
				this.options = this['options' + index];
				//获取对应的value数据
				let value = this['value' + index];
				console.log(value,this.options)
				if(value&&value!==0){
					console.log("进来了")
					this.options.forEach(item => {
						if (item.value == value) {
							this.currentItem = item;
							return;
							
						}
						
					});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.filter-nav {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
		height: 50px;

		.filter-item {
			text-align: center;
			font-size: 32rpx;
			color: #666;
		}
	}
</style>